<template>
	<view class="box">
		<view class="status_bar">
			<view class="top_view">
				<text class="iconfont icon-xiazai6" @tap="fanhui()"></text>
				<text>爱好</text>
				<text @tap="jumpp()">保存</text>
			</view>
		</view>
		<view class="center">
			<view class="title">
				<view></view>
				<view>运动</view>
				<view></view>
			</view>
			<view class="content">
				<checkbox-group @change="checkboxChange">
					<label :class="item.checked ? 'checkbox selectBox' : 'checkbox '" @click="labelBtn(item.value, index)" v-for="(item, index) in labelList" :key="item.value">
						<checkbox :value="item.value" :checked="item.checked" v-show="false" />
						<view>{{ item.name }}</view>
					</label>
				</checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			labelName: '',
			labelDataList: '',
			labelList: [
				{
					name: '可爱',
					value: '0',
					checked: false
				},
				{
					name: '性感',
					value: '1',
					checked: false
				},
				{
					name: '温柔',
					value: '2',
					checked: false
				},
				{
					name: '体贴',
					value: '3',
					checked: false
				},
				{
					name: '漂亮',
					value: '4',
					checked: false
				}
			]
		};
	},
	methods: {
		labelBtn(name, index) {
			console.log(name, index, 'nameindex');
			this.labelName = name;
			if (this.labelDataList.join(',').indexOf(name) > -1) {
				this.labelList[index].checked = true;
			} else {
				this.labelList[index].checked = false;
			}
		},
		checkboxChange: function(e) {
			this.labelDataList = e.detail.value;
			console.log(e);
			console.log('checkbox发生change事件，携带value值为：' + e.detail.value);
			console.log(this.labelDataList, 'labelDataList');
		},
		fanhui() {
			uni.navigateBack({
				delta: 1
			});
		},
		
	}
};
</script>

<style lang="less">
.box {
	font-family: PingFang SC;
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #1f1e24;
	.status_bar {
		box-sizing: border-box;
		/* // 自定义状态栏高度 */
		height: var(--status-bar-height);
		position: relative;
		height: 88upx;
		// transparent
		background-color: #fff;
		.top_view {
			box-sizing: border-box;
			background-color: #1f1e24;
			height: 88upx;
			padding: 0 30upx;
			// padding-top: calc(25upx + var(--status-bar-height));
			width: 100%;
			position: fixed;
			top: 0;
			z-index: 999;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// font-size: 36upx;
			color: #fff;
			text:nth-child(1) {
				font-size: 37upx;
			}
			text:nth-child(2) {
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(252, 250, 241, 1);
			}
			text:nth-child(3) {
				font-size: 37upx;
				font-size: 30upx;
				font-weight: 500;
				color: rgba(255, 224, 147, 1);
			}
		}
	}
	.center {
		padding: 48upx 30upx;
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28upx;
			color: rgba(226, 225, 221, 0.7);
			view:nth-child(1),
			view:nth-child(3) {
				flex: 1;
				height: 2upx;
				background-color: rgba(226, 225, 221, 0.7);
			}
			view:nth-child(2) {
				margin: 0 18upx;
			}
		}
	}
	.selectBox {
		background: #FFE093 !important;
		color: #1F1E24 !important;
	}
	.content {
		width: 100%;
		checkbox-group {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			text-align: center;
			label {
				background: rgba(229, 229, 229, .1);
				color: #FFFFFF;
				margin-top: 32upx;
				width: 150upx;
				height: 72upx;
				font-size: 28upx;
				line-height: 72upx;
				.checkbox {
					font-size: 28upx;
					width: 150upx;
					height: 72upx;
					view {
						width: 100%;
					}
				}
			}
		}
		
	}
}
</style>
